<template>
    <div class="content">
        <div class="top">
            <el-select v-model="value" clearable placeholder="请选择查询类型" style="width: 30%">
                <el-option
                        v-for="item in valueList"
                        :key="item.value"
                        :label="item.text"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-input v-model="context" placeholder="请输入查询内容"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="search" style="margin-left: 20px" class="button1">查询</el-button>
            <el-button type="primary" icon="el-icon-refresh-right" @click="reset" class="button3">重置</el-button>
            <el-button type="success" icon="el-icon-plus" @click="add" class="button2">新增</el-button>
        </div>
        <div class="list">
            <el-table
                    ref="multipleTable"
                    :data="tableData"
                    border
                    stripe
                    align="center"
                    tooltip-effect="dark"
                    :header-cell-style="{'background':'#eef1f6','color':'#1f2d3d','border-color':'#dfe6ec'}"
                    style="width: 100%;font-size: 14px;color: #1f2d3d"
                    v-loading="loading">
                <el-table-column
                        type="index"
                        label="序号"
                        align="center"
                        width="60">
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="用户账号"
                        align="center"
                        width="190">
                </el-table-column>
                <el-table-column
                        prop="nickname"
                        label="用户名称"
                        align="center"
                        width="170"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="sex"
                        label="性别"
                        width="70"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="homeaddress"
                        label="家庭住址"
                        show-overflow-tooltip
                        :formatter="showFormatter"
                        width="200"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="email"
                        label="邮箱"
                        width="220"
                        show-overflow-tooltip
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="note"
                        label="描述"
                        width="234"
                        :show-overflow-tooltip="true"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="type"
                        label="类型"
                        width="130"
                        :formatter="typeFormatter"
                        align="center">
                </el-table-column>
                <el-table-column prop=""
                                 label="操作"
                                 width="206"
                                 align="center">
                    <template slot-scope="scope">
                        <div style="display: flex;margin-left: 13px">
                            <el-button :plain="true"
                                       size="mini"
                                       style="background-color: #fff;font-size: 12px"
                                       @click="edit(scope.row, scope.$index)"
                            >编辑</el-button>
                            <el-button :plain="true"
                                       size="mini"
                                       style="color: #62a8ea;background-color: #fff;font-size: 12px"
                                       @click="detail(scope.row)"
                            >详情</el-button>
                            <el-button :plain="true"
                                       size="mini"
                                       style="font-size: 12px;color: black;background-color: #fff"
                                       @click="deleteData(scope.row, scope.$index)"
                                       type="danger">作废
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination @current-change="handleCurrentChange"
                               layout="total, sizes,prev, pager, next, jumper"
                               :page-size='pageSize'
                               :current-page="cur_page"
                               :page-sizes="[5, 10, 20, 50]"
                               :total="total" background
                               @size-change="handleSizeChange">
                </el-pagination>
            </div>
        </div>
        <add-dialog ref="addDialog"></add-dialog>
    </div>
</template>

<script>
    import addDialog from "./addDialog"
    export default {
        name: "adminIndex",
        components:{
            addDialog
        },
        data(){
            return{
                nickname: '',
                homeaddress: '',
                context: '',
                dialogTableVisible:false,
                value: '',
                valueList: [
                    {
                        text: '用户账号',
                        value: 'username'
                    },
                    {
                        text: '用户名称',
                        value: 'nickname'
                    },
                    {
                        text: '家庭住址',
                        value: 'homeaddress'
                    },
                    {
                        text: '性别',
                        value: 'sex'
                    },
                    {
                        text: '邮箱',
                        value: 'email'
                    },
                ],
                tableData: [],
                loading: false,
                total: 0,
                cur_page: 1,
                pageSize: 10,
            }
        },
        created(){
            this.getData()
        },
        mounted(){

        },
        methods:{
            // 分页导航
            handleCurrentChange(val) {
                this.cur_page = val;
                this.getData();
                this.search()
            },
            handleSizeChange(val) {
                this.cur_page = 1;
                this.pageSize = val;
                this.getData();
                this.search()
            },
            // 获取用户表信息
            getData(){
                this.loading = true;
                this.$Axios({
                    url: '/users/getUsersByTypePage',
                    method: 'get',
                    data:{
                        type: 1,
                        pageNum: this.pageSize,
                        currPage: this.cur_page - 1
                    },
                    success:(result)=>{
                        this.tableData = result.data
                        this.total = result.total;
                        setTimeout(()=>{
                            this.loading = false;
                        },100)
                    }
                })
            },
            // 查询
            search(){
                this.$axiosToken({
                    url: '/admin/getUserByTypeChar',
                    method: 'get',
                    data:{
                        type: 1,
                        inputText:this.context,
                        CharType:this.value,
                        pageNum: this.pageSize,
                        currPage: this.cur_page-1
                    },
                    success: (result)=>{
                        this.tableData = result.data
                        this.total = result.total
                        setTimeout(()=>{
                            this.loading = false;
                        },100)
                    }
                })
            },
            // 重置
            reset(){
                this.getData(this.pageSize, this.pageNo);
                this.value = '';
                this.context = '';
            },
            // 新增
            add(tableData){
                this.$nextTick(() => {
                    console.log(tableData,333)
                    this.$refs.addDialog.actionType = "add";
                    this.$refs.addDialog.dialogTableVisible = true;
                    this.$refs.addDialog.formData = Object.assign({});
                });
            },
            // 编辑
            edit(row,index){
                // this.$nextTick(() => {
                //     this.$refs.addDialog.dialogTableVisible = true;
                //     this.$refs.addDialog.actionType = "edit";
                //     console.log(row,'行')
                //     this.$refs.addDialog.formData = Object.assign({},row)
                // });
                console.log(row,'行')
                this.$refs.addDialog.actionType = "edit";
                this.$refs.addDialog.dialogTableVisible = true;
                this.$refs.addDialog.init(row)

            },
            // 详情
            detail(row){
                this.$refs.addDialog.dialogTableVisible = true;
                this.$refs.addDialog.actionType = "detail";
                this.$refs.addDialog.formData = Object.assign(row)
            },
            // 删除
            deleteData(row, index){
                this.$confirm('确定作废该管理员？', '提示', {
                    type: 'warning',
                }).then(()=>{
                    const u_id = row.id;
                    this.$axiosToken({
                        url: '/users/delUserData',
                        method: 'get',
                        data:{u_id},
                        success: (result) =>{
                            this.getData()
                            this.$message({
                                showClose: true,
                                message: '作废管理员成功',
                                type: 'warning'
                            })
                        }
                    }).catch((reason)=>{
                        alert('作废失败'+reason)
                    })
                })
            },
            // 类型转文字
            typeFormatter(row,column){
                const type = row.type
                if (type == 1){
                    return '管理员'
                }else {
                    return '普通用户'
                }
            },
            // 显示数据状态
            showFormatter(row,column){
                if (row.homeaddress == undefined || row.homeaddress == ''){
                    return '暂无'
                }else {
                    return row.homeaddress
                }
            },
        }
    }
</script>

<style scoped>
    .top {
        width: 100%;
        display: flex;
    }
    /deep/ .el-input__inner{
        font-size: 14px;
        height: 36px;
    }
    .el-input:nth-child(1) {
        width: 30%;
        border-radius: 4px;
    }
    .el-input:nth-child(2) {
        width: 30%;
        margin-left: 10px;
        border-radius: 4px;
    }
    .el-input:nth-child(3) {
        width: 22%;
        margin-left: 10px;
        border-radius: 4px;
    }
    .button1,.button2,.button3{
        border-radius: 4px;
        margin-left: 15px;
        color: #fff;
        font-size: 14px;
        width: 9%;
    }
    /deep/ .el-button--mini, .el-button--mini.is-round{
        padding: 6px 10px;
    }
    /deep/ .el-button--mini, .el-button--small{
        border-radius: 5px;
    }

    .list {
        margin-top: 25px;
    }
    .pagination{
        text-align: right;
        margin: 20px 0;
    }
    /deep/ .el-input.el-input--mini.el-input--suffix>.el-input__inner{
        height: 28px;
    }

</style>